 <!DOCTYPE html>
  <html lang="zh-cn">
    <head>
      <meta charset="utf-8">
	 <!--比例为1-->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>播放器</title>
     <style>
     *{padding: 0;margin: 0;}
     #main{max-width: 640px;margin: 0 auto;position: relative;padding: 1px;overflow: hidden;}
     html,body{background-color: #2b3942;}
     .yuan{width: 100%;/*transform:rotate(7deg);*/
    }
    .play-cl{
      position: absolute;
      width: 23%;top: -20px;right: 40%;margin-right: -60px;-webkit-transform:rotate(-60deg);z-index: 9;}
     .play .play-cl{top: 0px;right: 40%;margin-right: -60px;-webkit-transform:rotate(-30deg)}
    .btn{text-align: center;}
    .btn img{width: 12%;margin-top: 20px;}
.music{margin-top: 100px;}
.info{margin-top: 30px;text-align: center;font-size: 18px;color: #fff;}
.info p{font-size: 14px;line-height: 30px;color: #b1d2d2;}

.play .music{ -webkit-animation:9.5s linear 0s normal none infinite rotate;}

@-webkit-keyframes rotate{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
     </style>
    </head>
    <body >

<div id="main"> 
<img src="style/tou.png" alt="" class="play-cl">
<div class="music"><img src="style/yuan.png" class="yuan"></div>
<div class="info">
  <h3>海贼王主题曲</h3>
  <p>“ONE PIECE”在故事中为“一个大秘宝”之意</p>
</div>
<div class="btn"><img id="mPlay-cl'" src="style/play.png"></div>
</div>

   <audio src="http://www.erkezaixian.com/skin/14pa/style/song.mp3" id="mPlay"  style="display: none;"></audio>
      <!-- 在此处挥洒你的创意 -->
 
      <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  //音乐播放器控件
 var audio = document.getElementById('mPlay');
 var mLock=true;
$('.btn').click(function(){
  if(mLock){ 
    $('body').addClass('play');$('img',this).attr('src','style/stop.png');mLock=false;audio.play();
}else{
  $('img',this).attr('src','style/play.png');mLock=true;audio.pause();$('body').removeClass('play');}
});
</script>
    </body>
  </html>